<button
  id="reaction-butt-<%= category %>"
  aria-label="<%= aria_label %>"
  aria-pressed="false"
  class="crayons-reaction crayons-reaction--<%= category %> crayons-tooltip__activator relative"
  data-category="<%= category %>">
    <span class="crayons-reaction__icon <%= "crayons-reaction__icon--borderless" %> crayons-reaction__icon--inactive">
      <%= crayons_icon_tag(image_path, aria_hidden: true) %>
    </span>
    <% if user_signed_in? # We cannot trigger the action state unless the user is signed in, so no need to render. %>
      <span class="crayons-reaction__icon <%= "crayons-reaction__icon--borderless" %> crayons-reaction__icon--active">
        <%= crayons_icon_tag(image_active_path, aria_hidden: true) %>
      </span>
    <% end %>
    <span class="crayons-reaction__count" id="reaction-number-<%= category %>"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span>

    <span data-testid="tooltip" class="crayons-tooltip__content">
      <%= description %>
    </span>
</button>
